<template lang="pug">
  .saleHistory
    h2 动态记录
    //- 销售动态
    div.saleTimeline(v-loading="loading")
      el-timeline(v-if="history.length > 0")
        el-timeline-item(v-for="item in history" color="#6cd59b" :key="item.id" :timestamp="(item.actualFollowDate || item.created) | dateFilter('MM月DD日 HH:mm')" placement="top")
          .hisotryItem
            h4
              el-avatar.mr5(:src="item.staffHeadImgUrl" icon="el-icon-user-solid" :size="30")
              span.name {{item.staffName}}
            .detail
              p {{item.content}}
              p(v-if="item.imgUrl")
                a-image.mt5(v-for="url in strToArray(item.imgUrl)" :key="url" :url="url" width="64px" height="64px")
              footer(v-if="item.attachUrl")
                .right
                  span.clip
                    i(class="el-icon-paperclip")
                  el-tooltip(effect="dark" content="Top Left 提示文字" placement="top-start")
                    span.attachName 幼儿定制课件文件.pdf
                .left
                  small 328KB
                  a(href="javascript:") 预览
                  a(href="javascript:") /下载
      empty(v-else)
</template>
<script>
import Empty from '@/components/Basic/Empty'
import { leadsHistory } from '../api'

export default {
  components: {
    Empty
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    paramsKey: {
      type: String,
      default: 'leadsId'
    },
    type: {
      type: String,
      default: 'leadsHistory'
    }
  },
  data () {
    return {
      loading: false,
      history: []
    }
  },
  watch: {
    id: {
      handler (val) {
        if (val) {
          this.getLeadsHistory()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取销售动态
    getLeadsHistory () {
      const { id, paramsKey, type } = this
      this.loading = true
      leadsHistory({ [paramsKey]: id, pageNum: 0, pageSize: 999 }, [type]).then(res => {
        this.history = Array.isArray(res) ? res : (res.content || [])
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>

.saleHistory {

  h2 {
    margin-top: 8px;
    margin-bottom: 20px;
    margin-left: 40px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .saleTimeline{
    max-height: 720px;
    overflow-y: auto;
  }

  .hisotryItem{
    margin-top: 20px;
    h4 {
      margin-top: 0;
      margin-bottom: 5px;

      > span{
        vertical-align: middle;
      }

      span.name{
        margin-left: 5px;
        font-size: 15px;
        font-family: PingFang SC;
        ;
        color: #666666;
      }
    }

    .detail{
      background: #FAFAFA;
      border-radius: 10px;
      margin-left: 40px;
      padding: 15px;
      box-sizing: border-box;

      p {
        font-size: 15px;
        font-family: PingFang SC;
        ;
        color: #141414;
        line-height: 24px;
      }
    }

    footer{
      margin-top: 15px;
      position: relative;
      display: flex;
      align-items: center;
      .right {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 10px;

        .clip{
          width: 30px;
          height: 30px;
          background: #27A3FF;
          border-radius: 3px;
          display: inline-block;
          line-height: 34px;
          text-align: center;
          margin-right: 5px;

          i {
            color: #fff;
            font-size: 20px;
          }
        }
      }

      .attachName{
        font-size: 15px;
        line-height: 1;
        color: #141414;
        display: inline-block;
        width: calc(100% - 35px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .left{
        width: 130px;

        small{
          color: #A8A8A8;
          font-size: 15px;
          margin-right: 20px;
        }

        a {
          color: #2DB7F5;
          font-size: 15px;
        }
      }
    }
  }

  ::v-deep{
    .el-timeline{
      // padding-left: 10px
    }
    .el-timeline-item__node--normal{
      width: 10px;
      height: 10px;
      background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
    }
    .el-timeline-item__tail{
      border-left: 1px dashed #E8E8E8
    }
    .el-timeline-item__wrapper{
      padding-left: 20px
    }
  }
}
</style>
